<template>
  <div id="Home">
    <div class="content" style="width: 1152px;height:430px; ">
      <!--轮播-->
      <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()" style="height: 422px;">
        <div class="slideshow" style="height: 422px;">
          <transition-group tag="ul" name="image" style="height: 422px;">
            <li v-for="(img,index) in lb.list" v-show="index===mark" :key="index" style="height: 422px;width: 100%;">
              <router-link v-bind:key="img.id" :to="{path:lb.url+'/NewsInfo?id='+img.id}" style="display: inline-block;width: 100%;">
                <img :src='img.titlegraph' class="imgSrc" style="width:100%;height:422px">
                <span class="img_span" style="font-size:20px;color:#fff;display: inline-block;width:100%;height:50px;line-height:50px;position: absolute;z-index:222;background-color:black;margin-top: -7%;left: 0;opacity: .6;text-align: left;padding-left: 20px;bottom: 0;">
                  <span style="display: inline-block;width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" v-html="img.title"></span>

                </span>
              </router-link>
            </li>
          </transition-group>
        </div>
        <div class="bullet" style="position: absolute;margin-top: -4%;margin-left:83%;z-index: 999;">
          <span v-for="(item, index) in lb.list" :class="{ 'active':index===mark }" @click="change(index)" :key="index" style="display: inline-block;width: 15px;height: 15px;border-radius: 50%;background: white;margin-left:15px;"></span>
        </div>
      </div>

        <!--<Carousel autoplay class="slide" style="height: 422px;width: 100%;">-->
          <!--<Carousel-item v-for="(img,index) in lb.list"  style="height: 422px;width: 100%;">-->
            <!--<router-link v-bind:key="img.id" :to="{path:lb.url+'/NewsInfo?id='+img.id}" style="display: inline-block;width: 100%;">-->
            <!--<img :src='img.titlegraph' class="imgSrc" style="width:770px;height:422px">-->
            <!--<span class="img_span" style="font-size:20px;color:#fff;display: inline-block;width:100%;height:50px;line-height:50px;position: absolute;z-index:222;background-color:black;top:0;margin-top:16%;left: 0;opacity: .6;text-align: left;padding-left: 20px;bottom: 0;">-->
            <!--<span style="display: inline-block;width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" v-html="img.title"></span>-->
            <!--</span>-->
            <!--</router-link>-->
          <!--</Carousel-item>-->
        <!--</Carousel>-->


      <!--轮播 end-->
      <div class="content-latest-notice" style="position: relative;">
        <div class="notice-div"  style="position: relative;">
          <Notice :datas="notice"/>
        </div>
      </div>
    </div>
    <div class="theme-div" style="position: relative;">
      <img src="../../../static/assets/theme.png">
    </div>

    <div class="news-state">
      <div class="news-block-left">
        <CommerceBlock :datas="news"/>
      </div>
      <div class="news-block-right">
        <GrassDynamic :datas="jiceng" @change="changeHandle"/>
      </div>
    </div>

    <!--轮播1-->
    <div class="content" style="width:1152px;height: 155px;margin-bottom:15px;overflow: hidden;">
      <div :style="{height:height+ 'px'}" class="rollScreen_container" id ="rollScreen_container" style="width: 100%;">
        <ul class="rollScreen_list" :style = {transform:transform} :class="{rollScreen_list_unanim:num===0}" style="height: 155px;width:100%">
          <li class="rollScreen_once" v-for="(item,index) in contentArr" :key=index :style="{height:height+'px'}" style="width: 100%">
            <img :src='item' style="width:100%;height:155px;display: block">
          </li>
          <li class="rollScreen_once" v-for="(item,index) in contentArr" :key=index :style="{height:height+'px'}" style="width: 100%">
            <img :src='item' style="width:100%;height:155px;display: block">
          </li>

        </ul>

      </div>

    </div>


    <!--轮播1 end-->
    <!--<div class="nt-pic">-->
      <!--<img src="../../../static/assets/nt.png"/>-->
    <!--</div>-->
    <div class="news-state">
      <div class="news-block-left">
        <CommerceBlock :datas="vipService"/>
      </div>
      <div class="news-block-right">
        <CommerceBlock :datas="yusuan"/>
      </div>
    </div>
    <div class="news-state">
      <div class="news-block-left">
        <CommerceBlock :datas="jishang"/>
      </div>
      <div class="news-block-right">
        <CommerceBlock :datas="tuopin"/>
      </div>
    </div>
    <div class="news-state">
      <div class="news-block-left">
        <CommerceBlock :datas="zhengce"/>
      </div>
      <div class="news-block-right">
        <Download :datas="ziliao"/>
      </div>
    </div>
    <div class="lianjie">
      <div class="youqing">
        <span class="title">友情链接</span>
      </div>
      <form action="" method="post" class="select">
        <a href="http://www.acfic.org.cn/" type="primary" style="border-bottom:1px solid white;font-size: 1rem;display: inline-block;background:#2d8cf0;border-color:#2d8cf0;width:148px;height:37px;border-radius: 5px;text-align:center;color: white;line-height: 37px;">
          全国工商联

        </a>
        <select name="" onchange="window.location=this.value;" placement="bottom-start" class="form_select" style="color:white;background:#2d8cf0;border-color:#2d8cf0;width: 182px;height: 38px;border-radius: 5px;padding-left: 15px;">
          <option value="" style="font-size: 1rem;color:white;">各省（市）工商联</option>
          <option value="http://www.bjgsl.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">北京市工商联</option>
          <option value="http://www.sfic.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">上海市工商联</option>
          <option value="http://www.tjfic.com/" style="font-size: 1rem;color:#58585c;background:white;">天津市工商联</option>
          <option value="http://www.cqgcc.com.cn/" style="font-size: 1rem;color:#58585c;background:white;">重庆市工商联</option>
          <option value="http://www.gdgcc.gov.cn/" style="font-size: 1rem;color:#58585c;background:white;">广东省工商联</option>
          <option value="http://www.jssh.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">江苏省工商联</option>
          <option value="http://www.zjfic.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">浙江省工商联</option>
          <option value="http://www.lnsgsl.org/" style="font-size: 1rem;color:#58585c;background:white;">辽宁省工商联</option>
          <option value="http://www.jlszsh.net/" style="font-size: 1rem;color:#58585c;background:white;">吉林省工商联</option>
          <option value="http://www.hljgsl.org/" style="font-size: 1rem;color:#58585c;background:white;">黑龙江省工商联</option>
          <option value="http://www.scsgsl.cn/" style="font-size: 1rem;color:#58585c;background:white;">四川省工商联</option>
          <option value="http://www.hbsgsl.gov.cn/" style="font-size: 1rem;color:#58585c;background:white;">湖北省工商联</option>
          <option value="http://www.hfib.org/" style="font-size: 1rem;color:#58585c;background:white;">湖南省工商联</option>
          <option value="http://www.gxfic.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">广西省工商联</option>
          <option value="http://www.sdfic.com.cn/" style="font-size: 1rem;color:#58585c;background:white;">山东省工商联</option>
          <option value="http://www.fjgsl.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">福建省工商联</option>
          <option value="http://www.ahgcc.cn/" style="font-size: 1rem;color:#58585c;background:white;">安徽省工商联</option>
          <option value="http://www.hebgcc.org/" style="font-size: 1rem;color:#58585c;background:white;">河北省工商联</option>
          <option value="http://www.hnfic.org.cn" style="font-size: 1rem;color:#58585c;background:white;">海南省工商联</option>
          <option value="http://www.sxsgsylhh.org/" style="font-size: 1rem;color:#58585c;background:white;">山西省工商联</option>
          <option value="http://www.hngcc.org/" style="font-size: 1rem;color:#58585c;background:white;">河南省工商联</option>
          <option value="http://www.nmgfic.com/Overall_front/sy/index.htm" style="font-size: 1rem;color:#58585c;background:white;">内蒙古工商联</option>
          <option value="http://www.gzcofc.com/" style="font-size: 1rem;color:#58585c;background:white;">贵州省工商联</option>
          <option value="http://www.ypcc.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">云南省工商联</option>
          <option value="http://www.xn--vhq3x42huxan9bl2ztjz4y8ai8c36mxqk.com/" style="font-size: 1rem;color:#58585c;background:white;">西藏省工商联</option>
          <option value="http://www.sxfic.com/" style="font-size: 1rem;color:#58585c;background:white;">陕西省工商联</option>
          <option value="http://www.gssgsl.gov.cn/" style="font-size: 1rem;color:#58585c;background:white;">甘肃省工商联</option>
          <option value="http://www.qhfic.cn/" style="font-size: 1rem;color:#58585c;background:white;">青海省工商联</option>
          <option value="http://www.nxgsl.com/" style="font-size: 1rem;color:#58585c;background:white;">宁夏市工商联</option>
          <option value="http://gsl.xjbt.gov.cn/" style="font-size: 1rem;color:#58585c;background:white;">新疆兵团工商联</option>
        </select>
        <select class="form_select" style="color:white;background:#2d8cf0;border-color:#2d8cf0;width: 166px;height: 38px;border-radius: 5px;padding-left: 15px;">
          <option value="" style="font-size: 1rem;color:white;">市（州）工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">长春市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">吉林市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">四平市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">辽源市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">通化市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">白山市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">松原市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">白城市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">延吉市工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">长白山管委会</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">梅河口工商联</option>
          <option value="javascript:void(0);" style="font-size: 1rem;color:#58585c;background:white;">公主岭工商联</option>
        </select>
        <select class="form_select" style="color:white;background:#2d8cf0;border-color:#2d8cf0;width: 166px;height: 38px;border-radius: 5px;padding-left: 15px;">
          <option value="" style="font-size: 1rem;color:white;">异地商会</option>
          <option value="http://jlsgdsh.com/allsh/gdsh/index.html" style="font-size: 1rem;color:#58585c;background:white;">吉林省广东商会</option>
          <option value="http://www.jljssh.org/" style="font-size: 1rem;color:#58585c;background:white;">吉林省江苏商会</option>
          <option value="http://www.jlshnsh.cn/" style="font-size: 1rem;color:#58585c;background:white;">吉林省河南商会</option>
          <option value="http://87873999.com/" style="font-size: 1rem;color:#58585c;background:white;">吉林省内蒙古商会</option>
          <option value="http://www.jlsxsh.com/" style="font-size: 1rem;color:#58585c;background:white;">吉林省山西商会</option>
        </select>
        <select class="form_select" style="color:white;background-color:#2d8cf0;border-color:#2d8cf0;width: 166px;height: 38px;border-radius: 5px;padding-left: 15px;">
          <option value="" style="font-size: 1rem;color:white;">行业商会组织</option>
          <!--<option value="http://www.chinajs.org.cn/" style="font-size: 1rem;color:#58585c;background:white;">吉林省吉商商会</option>
              <option value="http://www.jlfzfzw.com/" style="font-size: 1rem;color:#58585c;background:white;">吉林省纺织服装商会</option>-->
        </select>
      </form>
    </div>
  </div>
</template>


<script>
  import CommerceBlock from './CommerceBlock'
  import GrassDynamic from './GrassDynamic'
  import baseConfig from 'baseConfig'
  import Notice from './Notice'
  import Download from './Download'
  import $ from 'jquery'
  import ResearchService from "../researchService/ResearchService";

  export default {
    name: 'Home',
    props: {
      height: {
        default: 155,
        type: Number
      },
      lineNum: {
        default: 0,
        type: Number
      }
    },
    data () {
      return {
        news: baseConfig.news,
        notice: baseConfig.notice,
        jiceng: baseConfig.jiceng,
        vipService: baseConfig.vipService,
        yusuan: baseConfig.yusuan,
        jishang: baseConfig.jishang,
        tuopin: baseConfig.tuopin,
        zhengce: baseConfig.zhengce,
        ziliao: baseConfig.ziliao,
        falv: baseConfig.falv,
        lb: baseConfig.lb,
        pageData: {},
        timer: null, //定时器
        mark: 0 ,//比对图片索引的变量
        imgArray: [
          '../../../static/assets/nt.png',
          '../../../static/assets/theme.png',
          '../../../static/assets/nt1.png'
        ],
        contentArr: ['../../../dist/static/assets/img_lun1.jpg', '../../../dist/static/assets/img_lun2.jpg'],
        num: 0

      }
    },
    computed: {
      transform: function () {
        return 'translateY(-' + this.num * this.height + 'px)'
      }
    },

    created: function () {
      let _this = this
      setInterval(function () {
        if (_this.num !== _this.contentArr.length) {
          _this.num++
        } else {
          _this.num = 0
        }
      }, 3000)
    },
    components: {
      ResearchService,
      CommerceBlock,
      GrassDynamic,
      Notice,
      Download
    },
    methods: {
      //轮播图
      autoPlay () {
        this.mark++;
        if (this.mark === 3) {
          this.mark = 0
        }
      },
      play () {
        this.timer = setInterval(this.autoPlay, 5000)
      },
      change (i) {
        this.mark = i
      },
      stop () {
        clearInterval(this.timer)
      },
      move () {
        this.timer = setInterval(this.autoPlay, 5000)
      },

      created () {
        this.play()
      },

      /* 调用接口，获取首页相关数据 */
      getHomePageData () {
        let _this = this;
        this.$fetch('indexpage')
          .then(response => {

              //成功获取服务器数据
              if (response.code === "200"){
                let data = response.data;
                _this.pageData = data;
                _this.news.list = this.getHomeData('news', data);
                _this.jiceng.list = this.getHomeData("jiceng_1", data);
                _this.vipService.list = this.getHomeData('vipService', data);
                _this.yusuan.list = this.getHomeData('yusuan', data);
                _this.jishang.list = this.getHomeData('jishang', data);
                _this.tuopin.list = this.getHomeData('tuopin', data);
                _this.zhengce.list = this.getHomeData('zhengce', data);
                _this.notice.list = this.getHomeData('notice', data);
                _this.ziliao.list = this.getHomeData('ziliao', data);
                _this.lb.list = this.getHomeData('lb', data);
                _this.falv.list = this.getHomeData('falv', data);
              }
            }
          )
      },
      /* 获取服务器数据
      * type：数据模块类型
      * data：从服务器获取来的数据
      * */
      getHomeData (type, data) {
        let ary,i;
        let list;

        switch (type) {
          case "news":// 新闻资讯
            list = data.list_news;
            break;
          case "notice":// 通知通告
            list = data.list_notice;
            break;
          case "ziliao":// 资料下载
            list = data.list_file;
            break;
          case "vipService":// 会员供求服务
            list = data.list_gqgx;
            break;
          case "yusuan":// 预决算公告
            list = data.list_ysjs;
            break;
          case "jishang":// 吉商专栏
            list = data.list_js;
            break;
          case "tuopin":// 脱贫攻坚
            list = data.list_gyfp;
            break;
          case "zhengce":// 政策法规
            list = data.list_zcfg;
            break;
          case "lb":// 政策法规
            list = data.list_lb;
            break;
          case "jiceng_1":// 工商联组织
            list = data.list_gsl;
            break;
          case "jiceng_2":// 商会组织
            list = data.list_sh;
            break;

        }

        ary = [];
        let len = list.length;

        if (len > 5){

          if (type === "jiceng_1" || type === "jiceng_2"){
            len = 4;
          }else if (type === "notice"){
            len = 8;
          }else {
            len = 5;
          }
        }

        for (i = 0; i < len; i++){
          let obj = {};
          obj.id = list[i].id;
          obj.title = list[i].title;// 获取列表title
          obj.titlegraph= list[i].titlegraph;//获取图片
          obj.date = list[i].createDate.split(' ')[0].substr(5);// 截取时间
          obj.createDate = list[i].createDate;// 创建时间
          obj.content = list[i].content;

          if (type === "lb"){
            if (obj.titlegraph != null && obj.titlegraph != "" ){
              obj.titlegraph='../'+ list[i].titlegraph.substr(2);// 获取列表img
            }
          }

          ary.push(obj);
        }

        return ary;
      },
      changeHandle (type) {
        if (type === "工商联组织") {
          this.jiceng.list = this.getHomeData("jiceng_1", this.pageData);
        }
        else if (type === "商会组织") {
          this.jiceng.list = this.getHomeData("jiceng_2", this.pageData);
        }
      }
    },
    mounted () {
      this.autoPlay();

      /* 调用接口，获取首页相关数据 */
      this.getHomePageData();
    },
    // 离开当前页面，即将跳转到详情页面时，设置列表隐藏
    beforeRouteLeave (to, from, next) {
      debugger
      if (to.fullPath.indexOf('AnnouncementbuildingGarden/AnnouncementOne') >= 0) {
        this.$store.commit('updateShow', false)
      }
      next()
    }
  }


</script>

<style scoped lang="scss">
  @import 'publicLib/scss/defualtScss.scss';
  * {
    list-style: none;
  }
  @mixin selectStyle{
    height: 2.5rem;
    margin: 1rem 2rem;
    font-size: $font-size-default;
  }
  .rollScreen_container{
    display: inline-block;
    position:relative;
    overflow: hidden;
  }
  .rollScreen_list{
    transition: 1s linear;
  }
  .rollScreen_list_unanim{
    transition: none
  }
  /*轮播*/
  .image-enter-active {
    transform: translateX(0);
    transition: all 1.5s ease;
  }
  .image-leave-active {
    transform: translateX(-100%);
    transition: all 1.5s ease;
  }
  .image-enter {
    transform: translateX(100%);
  }
  .image-leave {
    transform: translateX(0);
  }
  .slide {
    width:60%;
    height: 422px;

    overflow: hidden;
    position: relative;
    float: left;

  }
  .slideshow {
    width:100%;
    height: 422px;
  }
  .slide .slideshow ul li {
    position: absolute;
  }
  img {
    width:100%;
    height:422px;
  }
  .bar {
    position: absolute;
    width: 100%;
    bottom: 10px;
    margin: 0 auto;
    z-index: 10;
    text-align: center;
  }
  .bar span {
    width: 20px;
    height: 5px;
    border: 1px solid;
    background: white;
    display: inline-block;
    margin-right: 10px;
  }
  .active {
    background: #6495ed !important;
  }
  /*轮播end*/
  #Home{
    width: 100%;
  }
  .content{
    width: 100%;
    display: flex;
    padding-bottom: 1rem;

    .content-scroll{
      width: 70%;
      height: 26.5rem;
      margin-right: 1rem;

      .img_box{
        background-color: cornflowerblue;
        position: relative;
        z-index: 1;
      }
    }

    .content-latest-notice{
      width: 39%;
      margin-left: 2%;
      height: 26.4rem;
      background-color: #E6F2FF;
      border: #d6d6d6 0.01rem solid;
      float: right;

      .notice-div{
        height: 4rem;
        color: white;
        font-size: 1.3rem;
        background-color: $more-title-color;
        //display: flex;
        align-items: center;

        .notice{
          margin-left: 1rem;
          margin-right: 10rem;
          color: white;
          font-size: 1.1rem;
        }

        .more{
          font-size: 1rem;
          cursor: pointer;
          color: white;
        }
      }
    }
  }

  .nt-pic{
    width: 100%;
    height: 159px;
    margin-bottom: 15px;
    img{
      width: 100%;
      height: 159px;
    }
  }

  .theme-div{
    width: 100%;
    height: 159px;
    margin-bottom: 15px;
    img{
      width: 100%;
      height: 159px;
    }
  }

  .news-state{
    width:100%;
    display: flex;
    align-items: center;
    height: 340px;
    position: relative;

    .news-block-left{
      width:49.5%;
      margin-right: 1rem;
      float: left;
    }

    .news-block-right{
      width:49.5%;
      float: right;
    }
  }

  .lianjie{
    width: 100%;
    background-color: white;
    color: #1F52A3;
    text-align: left;
    font-size: 1.3rem;
    border: #D6D6D6 0.09rem solid;

    .youqing{
      width: 96%;
      margin: 0 auto;
      margin-bottom: 1rem;
    }

    .select{
      padding: 0.5rem 1rem 1rem 3rem;
      font-size: 1rem;

      .dropdown{
        margin: 1rem;
      }

    }

    .title{
      padding: 1rem;
      display: block;
      border-bottom: #D6D6D6 0.25rem solid;
    }

  }

  .img_box{
    overflow: hidden;
    width:100%;
    height:100%;
    position:relative;
  }
  .img_box img{
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    /*margin:auto;*/
  }
  .ul5{
    list-style: none;
    float: right;
    z-index: 2;
    margin: -3rem 2rem 1rem 0;
    position: relative;
  }
  .ul5 li{
    width:14px;
    height:14px;
    background-color:cornflowerblue;

    /* 浮动 竖变横 */
    float:left;

    /* 宽高相等 + 圆角50% -> 圆形 */
    border-radius:50%;

    margin:10px;
  }

  .menu1{
    width:10rem;
    overflow-x: hidden;
    height: 15rem;
  }
  .menu2{
    width:9rem;
    overflow-x: hidden;
    height: 10rem;
  }
  .menu1 DropdownItem{
    height: 20rem;
  }
  .menu2 DropdownItem{
    height: 15rem;
  }
  .form_select {margin-left: 35px;}
  .image-enter-active {
    transform: translateX(0);
    transition: all 5s ease;
  }
  .image-leave-active {
    transform: translateX(-100%);
    transition: all 5s ease;
  }
  .image-enter {
    transform: translateX(100%);
  }
  .image-leave {
    transform: translateX(0);
  }
</style>
